<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

</head>
<body>
<!--动态参数需要使用{{$route.params.参数名接受}}-->
<div id="app">
    <router-view></router-view>
</div>
<script>
    let first = {
        template: `
        <div>
        这是组件1
        <router-link to="/second/1/tom">访问组件2</router-link>
</div>`
    }
    let second = {
        template: `
        <div>
        这是组件2 ,接收组件1的值----> {{$route.params.id}}
        <br>
        {{$route.params.name}}
</div>`
    }
    let myRouter = new VueRouter({
        routes: [
            {path: "/first", component: first},
            {path: "/second/:id/:name", component: second},
            {path: "/", redirect: "/first"},
        ]
    })
    new Vue({
        el: "#app",
        data: {},
        router: myRouter,
    })
</script>
</body>
</html>